<template>
  <div class="bom_tree_left">
     <Button type="info"  size="small" v-if="aNewData.length>0" class="open_btn"  :icon="openAll?'md-arrow-round-up':'md-arrow-round-down'" @click="openAllFn">
       {{openAll?'收起全部':'展开全部'}}
     </Button>
     <el-tree
      :data="aNewData"
      :default-expand-all = "openAll"
      node-key="code"
      :expand-on-click-node="false"
      :props="defaultProps"
      :default-expanded-keys = 'aExpand'
      :default-checked-keys = "aExpand"
       @node-click="handleNodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <Icon type="ios-folder-open" color="#2db7f5" v-if="data.childs&&data.childs.length"/>
          <Icon type="ios-paper-outline" color="#2db7f5"  v-else/>
        </span>
        <span>{{ node.label}}&nbsp;&nbsp;{{data.material.name}}</span>
      </span>
    </el-tree>
    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>

<script>
import myServer from '@/api/index.js';
  export default {
    name: "bomTree"
    ,props:{
        code:{
            type:String
            ,default:""
        }
    }
    ,data(){
      return {
          aNewData : []
          , defaultProps: {
                children: 'childs',
                label: 'code'
            }
          ,bomTreeCode:{}
          ,spinShow:false
          ,aExpand:[] //默认展开项
          ,aChecked:[] //默认选中的节点
          ,openAll:false //是否展开全部
          ,aExpandAll:[]
        }
    }
    ,watch:{
        code(newVal){
          let t = this;
          t.getData();
        }
    }
    ,created(){
        let t = this;
    }
    ,methods:{
        getData(){
          let t = this;
          t.spinShow = true;
          myServer.v(this);
          myServer.bomTree.bomTreeCode({
              data:{materialCode:t.code}//63.01.3026-00
              ,success:function(data){
                let oNewData = JSON.parse(JSON.stringify(t.bomTreeCode.ext)); 
                if(Object.keys(oNewData).length){
                   t.aNewData = [oNewData];
                  t.aExpand = [oNewData.code];
                  t.aChecked =  [oNewData.code];
                  t.aExpandAll  [oNewData.code];
                  t.getExpandId(oNewData.childs);
                }else{
                  t.aNewData = [];
                  t.aExpand = [];
                  t.aChecked =  [];
                }
                t.spinShow = false;
                t.$emit('getTreeDetail',oNewData)
              }
          });
        }
        ,handleNodeClick(data) {
            let t = this;
            t.$emit('getTreeDetail',data);
        }
        //获取展开所有的节点
        ,getExpandId(aData){
          let t = this;
          aData.map(data=>{
            if(data.childs&&data.childs.length){
              t.aExpandAll.push(data.code);
              t.getExpandId(data.childs);
            }
          })
        }
        ,openAllFn(){
          let t = this;
          t.openAll = !t.openAll;
          if(t.openAll){
             t.aExpand = t.aExpandAll;
          }else{
            let aOldData = t.aNewData;
            t.aNewData = [];
            t.$nextTick(()=>{
              t.aExpand = [];
              t.aNewData = aOldData;
            })
          }
        }
    }
  }
</script>

<style lang="less">
  .bom_tree_left{
    max-width: 800px;
    .open_btn{
      margin-bottom: 10px;
      font-size: 12px;;
    }
    .el-tree-node>.el-tree-node__children {
      overflow: visible;
    }
  }
</style>
